<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/static/js/jquery.min.js"></script>
    <link href="/static/css/alert.css" rel="stylesheet">
    <style>
        .main{
            background-color: #fff;
            width: 98%;
            margin: 20px auto;
        }
        .users-page{
            width: 98%;
            padding:1%;
        }
        .users-page table{
            border-collapse: collapse;
            width: 100%;
        }
        .users-page table tr td,
        .users-page table tr th{
            border: 1px solid #666;
            min-width: 120px;
            min-height: 40px;
            text-align: center;
            padding:5px 0px;
        }
        .users-page table thead tr th a{
            display: inline-block;
            background-color: #a1cc34;
            color: #fff;
            padding: 5px;
            width: 120px;
            margin-left:20px;
            text-decoration: none;
            float: left;
        }
        .users-page table tbody tr td a{
            display: inline-block;
            background-color: #a2ccce;
            color: #fff;
            padding: 5px;
            margin: 5px;
            width: 120px;
            text-decoration: none;
        }
        .users-page table .pagination{

        }
        .users-page table .pagination li{
            list-style: none;
            display: inline-block;
            width: 40px;
            height: 40px;
            line-height: 40px;
            background-color: #eee;
            border: 1px solid #999;
            margin: 5px;
        }
        .users-page table .pagination li[class="active"]{
            background-color: #999;
            border: 1px solid #eee;
        }
        .users-page table .pagination li a{
            display: block;
            color: #000;
            font-size: 14px;
        }
        .users-page table .pagination li[class="active"] span{
            color:#fff;
        }
        .message,.rule{
            display: none;
            position: absolute;
            top:10%;
            left:50%;
            margin-left: -152px;
            width: 300px;
            border: 2px solid #a12cc4;
            background-color: #fff;
            z-index: 1001;
        }
        .rule label{
            padding:25px;
            display: inline-block
        }
        .message .username{
            width: 150px;
            margin:10px auto;
            height: 40px;
        }
        .message .username span{
            display: block;
            height: 40px;
            line-height: 40px;
            text-align: center;
        }
        .message .data{
            margin: auto;
            width: 95%;
            height: 60px;
            text-align: center;
        }
        .message .button,
        .rule .button{
            width: 100%;
            height: 45px;
            text-align: center;
        }
        .message .button a,
        .rule .button a,
        .create .inputs div a{
            display: inline-block;
            text-align: center;
            background-color: #1aceee;
            color: #fff;
            height: 25px;
            line-height: 25px;
            width: 80px;
            padding:5px;
            margin: auto;
        }
        .create{
            display: none;
            position: absolute;
            top:10%;
            left:50%;
            margin-left: -202px;
            width: 400px;
            height: 430px;
            border: 2px solid #7ff77f;
            background-color: #fff;
            z-index: 1001;
        }
        .create .inputs{
            width: 95%;
            padding: 5px 2.5%;
        }
        .create .inputs div{
            width: 100%;
            height: 50px;
            text-align: center;
            line-height: 50px;
        }
    </style>
</head>
<body>
<div class="main">
    <div class="users-page">
        <table>
            <thead>
            <tr>
                <th colspan="8">
                    <a href="javascript:create();">添加账号</a>
                </th>
            </tr>
            <tr>
                <th>账号</th>
                <th>余额</th>
                <th>系数</th>
                <th>子账号</th>
                <th>状态</th>
                <th>最后一次登录日期</th>
                <th>权限</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            {volist name="list" id="value"}
            <tr {eq name="value.status" value="3"}style="background-color:#00A2E9;"{/eq}>
            <td>{$value.username}</td>
            <td>{$value.amount}</td>
            <td>{$value.price_ratio}</td>
            <td>{$value.is_son_text}</td>
            <td>{$value.status_text}</td>
            <td>{$value.login_date}</td>
            <td>
                {$value.rule_text|default=""}
            </td>
            <td>
                {eq name="value.status" value="3"}
                <a href="javascript:status_save({$value.id},1);">激活</a>
                {else}
                <a href="javascript:rule({$value.id});">设置权限</a>
                <a href="javascript:discount({$value.id})">设置折扣</a>
                <a href="javascript:password({$value.id},'{$value.username}');">修改密码</a>
                <a href="javascript:amount({$value.id},'{$value.username}');">更改余额</a>
                <a href="javascript:priceratio({$value.id},'{$value.username}')">更改系数</a>
                <a href="javascript:del_user({$value.id});">删除用户</a>
                {/eq}
            </td>
            </tr>
            {/volist}
            </tbody>
            <tfoot>
            <tr>
                <td colspan="8">
                    {$list|raw}
                </td>
            </tr>
            </tfoot>
        </table>
    </div>
</div>
<div class="rule" id="rule-div">
    <div class="rule-list" id="rule-list">

    </div>
    <div class="button">
        <a href="javascript:rule_save();">
            确定
        </a>
        <a href="javascript:hiddenmsg();">
            取消
        </a>
    </div>
</div>
<div class="message" id="message">
    <div class="username">
        <span id="username"></span>
    </div>
    <div class="data">
        <label for="value">
            <span id="attr"></span>
            <input type="text" id="value">
        </label>
    </div>
    <div class="button">
        <a href="javascript:save();">
            确定
        </a>
        <a href="javascript:hiddenmsg();">
            取消
        </a>
    </div>
</div>
<div class="create" id="create_div">
    <div class="inputs">
        <div>
            <label for="account">
                <span>账号:</span><input type="text" id="account" name="username">
            </label>
        </div>
        <div>
            <label for="nickname">
                <span>昵称:</span><input type="text" id="nickname">
            </label>
        </div>
        <div>
            <label for="company_name">
                <span>公司名称:</span><input type="text" id="company_name">
            </label>
        </div>
        <div>
            <label for="mobile">
                <span>联系方式:</span><input type="text" id="mobile">
            </label>
        </div>
        <div>
            <label for="pwd">
                <span>密码:</span><input type="text" id="pwd">
            </label>
        </div>
        <div>
            <label for="price_ratio">
                <span>系数:</span><input type="text" id="price_ratio">
            </label>
        </div>
        <div>
            <label for="is_son1">
                <span>子账号权限:</span>
                <label for="is_son1">
                    <input type="radio" name="is_son" id="is_son1" checked value="1">开启
                </label>
                <label for="is_son2">
                    <input type="radio" name="is_son" id="is_son2" value="2">禁用
                </label>
            </label>
        </div>
        <div>
            <a href="javascript:create_user();">确定</a>
            <a href="javascript:hiddenmsg();">取消</a>
        </div>
    </div>
</div>
</body>
<script>
    var aid = 0,
        field = '',
        create_div = document.getElementById('create_div'),
        message = document.getElementById('message'),
        attr = document.getElementById('attr'),
        username = document.getElementById('username'),
        value = document.getElementById('value'),
        rule_text = {history:"查询记录",BaiduKeywordsSpotting:'百度关键词监听',web:"网站",order:"订单",users:"用户",message:"关键词数据",setmenu:"套餐设置",project:"项目管理",DouyinKeywordsSpotting:"抖音关键词监听"};
    function rule(id){
        aid = id;
        block_mask_show();
        document.getElementById('rule-div').style = 'display:block';
        console.log(config);
        let arr = JSON.parse(config.rule_list),
            string = '',
            array = [];
        $.ajax({
            url:'/index/users/info?id=' + id,
            type: 'post', // 请求类型，可以是 'GET' 或 'POST'  
            data:{id:id},
            dataType: 'json', // 预期服务器返回的数据类型  
            success: function(res) {
                let is_bool = false;
                if(res.code == 200){
                    let my_rule = res.data.rule;
                    if (!my_rule){
                        arr.forEach(item => {
                            string += '<label for="' + item + '"><input type="checkbox" id="' + item + '" name="rule">' + rule_text[item] + '</label>';
                        });
                    }else{
                        array = JSON.parse(my_rule);
                        arr.forEach(item => {
                            is_bool = array.includes(item);
                            if (is_bool){
                                string += '<label for="' + item + '"><input type="checkbox" id="' + item + '" checked name="rule">' + rule_text[item] + '</label>';
                            }else{
                                string += '<label for="' + item + '"><input type="checkbox" id="' + item + '" name="rule">' + rule_text[item] + '</label>';
                            }
                        });
                    }
                    document.getElementById('rule-list').innerHTML = string;
                }
            }
        });
    }

    function create(){
        block_mask_show();
        create_div.style = 'display:block';
    }

    function create_user(){
        let nickname = document.getElementById('nickname'),
            account = document.getElementById('account'),
            company_name = document.getElementById('company_name'),
            mobile = document.getElementById('mobile'),
            pwd = document.getElementById('pwd'),
            price_ratio = document.getElementById('price_ratio'),
            is_son = document.getElementsByName('is_son');
        data = {
            nickname:nickname.value,
            username:account.value,
            password:pwd.value,
            price_ratio:price_ratio.value,
            mobile:mobile.value,
            company_name:company_name.value
        }
        is_son.forEach(item => {
            if(item.checked == true)
                data.is_son = item.value;
        });
        $.ajax({
            url:'/index/users/create',
            type: 'post', // 请求类型，可以是 'GET' 或 'POST'  
            data:data,
            dataType: 'json', // 预期服务器返回的数据类型  
            success: function(res) {
                if(res.code == 200){
                    show_after('添加成功','创建账号',true);
                }else{
                    show_after(res.msg,'创建失败',false);
                }
            }
        });
    }

    function password(id,name){
        set_value(id,name,'password','密码');
    }

    function amount(id,name){
        set_value(id,name,'amount','余额');
    }

    function priceratio(id,name){
        set_value(id,name,'price_ratio','系数');
    }

    function discount(id,name){
        set_value(id,name,'discount','折扣');
    }

    function set_value(id,name,item,xe){
        block_mask_show();
        field = item;
        message.style = 'display:block';
        username.innerHTML = name;
        aid = id;
        $.ajax({
            url:'/index/users/info?id=' + id,
            type: 'post', // 请求类型，可以是 'GET' 或 'POST'  
            data:{id:id},
            dataType: 'json', // 预期服务器返回的数据类型  
            success: function(res) {
                if(res.code == 200){
                    attr.innerHTML = xe;
                    value.value = res.data[item];
                }
            }
        });
    }

    function rule_save(){
        let data = [],rule = document.getElementsByName('rule');
        rule.forEach(item => {
            if (item.checked == true)
                data.push(item.id);
        });
        data = JSON.stringify(data);
        $.ajax({
            url:'/index/users/save',
            type: 'post', // 请求类型，可以是 'GET' 或 'POST'  
            data:{attr:'rule',value:data,id:aid},
            dataType: 'json', // 预期服务器返回的数据类型  
            success: function(res) {
                if(res.code == 200){
                    location.reload();
                }
            }
        });
    }

    function save(){
        let data = {
            id:aid,
            attr:field,
            value:value.value
        };
        $.ajax({
            url:'/index/users/save',
            type: 'post', // 请求类型，可以是 'GET' 或 'POST'  
            data:data,
            dataType: 'json', // 预期服务器返回的数据类型  
            success: function(res) {
                if(res.code == 200){
                    location.reload();
                }
            }
        });
    }

    function status_save(id,value){
        let data = {
            id:id,
            attr:'status',
            value:value
        }
        $.ajax({
            url:'/index/users/save',
            type: 'post', // 请求类型，可以是 'GET' 或 'POST'  
            data:data,
            dataType: 'json', // 预期服务器返回的数据类型  
            success: function(res) {
                if(res.code == 200){
                    location.reload();
                }
            }
        });
    }

    function del_user(id){
        $.ajax({
            url:'/index/users/del?id=' + id,
            type: 'post', // 请求类型，可以是 'GET' 或 'POST'  
            data:{},
            dataType: 'json', // 预期服务器返回的数据类型  
            success: function(res) {
                if(res.code == 200){
                    location.reload();
                }
            }
        });
    }
</script>
<script src="/static/js/base.js"></script>
</html>